<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/index.css">
  <link rel="stylesheet" href="/init.css">
  <title>Document</title>
</head>

<body>
  <nav>
    <ul class="nav-bar clearfix">
      <li class="nav-item">首页</li>
      <li class="nav-item">关于我们</li>
      <li class="nav-item" id="display">作品</li>
      <li class="nav-item">博客</li>
    </ul>
    <div class="menu-content" id="menu">
      <ul>
        <li>论坛</li>
        <li>留言板</li>
        <li>照片墙</li>
      </ul>
    </div>
  </nav>
  <script>
    var item = document.getElementById('display')
    var menu = document.getElementById('menu')
    var timer = null
    function show() {
      clearTimeout(timer)
      timer = setTimeout(menu.style.display = 'block', 400);
    }
    function hide() {
      clearTimeout(timer)
      timer = setTimeout(menu.style.display = 'none', 400);
    }
    item.onmouseover = show
    item.onmouseout = hide
    menu.onmouseover = show
    menu.onmouseout = hide
  </script>
</body>

</html>
